<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class = "box1"></div>
<div class = "box2"></div>
<script>
    /*
    * Map 是对象的升级版
    *   直接将对象和对象关联起来
    *
    *   Map的数据结构 属性名可以是对象 属性值也可以是对象
    *
    *   map.set(key,value) 其中key和value都可以是对象
    *
    * 普通对象的局限性：
    *   对象就是映射关系的集合，每一个key 对应到 每一个value
    *   局限性就在于 key只能是字符串
    *
    * */

    let div1 = document.querySelector(".box1")
    let div2 = document.querySelector(".box2")

    let style1 = {
        width:"300px",
        height:"200px",
        background:"red",
    }
    let style2 = {
        width:"100px",
        height:"400px",
        background:"blue",
    }

    //现有一个需求，将div1和style1关联起来，div2和style2关联起来，怎样实现这个数据结构？

    //原先的方法
    let arr = [
        {
            el:div1,
            style:style1
        },
        {
            el:div2,
            style:style2
        }
    ]

    //1.通过这个数据结构 查询div1的样式
    let result = null
    arr.forEach(obj => {
        if(obj.el === div1){
            result =obj.style
        }
    })

    //2.通过这个数据结构 查询style2的对应元素



    //使用Map方法
    let map = new Map()
    map.set(div1,style1)
    map.set(div2,style2)

    console.log(map.get(div1)) //会返回对应对象的值style1
    //原生map可以通过键名key查询键值value，不可以通过键值value查询键名key，因为键值value可能相同，就会返回好几个键值key

    //自行封装MyMap构造函数和MySet构造函数
    //自行添加map查询键值value返回所有对应键名key形成的数组方法getFromValue


</script>
</body>
</html>